import React from 'react';
import './list.scss';
import { Link } from "react-router-dom";
import Footer from "../../Component/Footer";

function List() {
    return ( <div className='home-list'>
        {/* 顶部:搜索栏 */}
        <div className="header">
            <img className='header-img' src="http://static.huruqing.cn/villa/logo.png" alt="" />
            <p className='header-search'> 
                <span className='iconfont icon-search header-icon'></span>
                <input className='header-input' type="search" placeholder='搜索关键字/城市/别墅名' />
            </p>
        </div>
        {/* 轮播图 */}
        <div className='swiper'>
            <img className='swiper-img' src="https://img.villaday.com/images/t9/406/406-14755427.png?x-oss-process=image/resize,m_fill,w_750,h_500,limit_0/sharpen,100/format,webp" alt="" />
        </div>
        {/* 别墅推荐 */}
        <div className="tab">
            <p className='tab-title'>别墅推荐</p>
            <div className='tab-list'>
                <div className='tab-item'>
                    <img className='tab-img' src="http://static.huruqing.cn/villa/61-15991012737380.jpg" alt="" />
                    <p className='item-title'>泳池别墅</p>
                </div>
                <div className='tab-item'>
                    <img className='tab-img' src="http://static.huruqing.cn/villa/61-15991012737380.jpg" alt="" />
                    <p className='item-title'>泳池别墅</p>
                </div>
                <div className='tab-item'>
                    <img className='tab-img' src="http://static.huruqing.cn/villa/61-15991012737380.jpg" alt="" />
                    <p className='item-title'>泳池别墅</p>
                </div>
                <div className='tab-item'>
                    <img className='tab-img' src="http://static.huruqing.cn/villa/61-15991012737380.jpg" alt="" />
                    <p className='item-title'>泳池别墅</p>
                </div>
                <div className='tab-item'>
                    <img className='tab-img' src="http://static.huruqing.cn/villa/61-15991012737380.jpg" alt="" />
                    <p className='item-title'>泳池别墅</p>
                </div>
                <div className='tab-item'>
                    <img className='tab-img' src="http://static.huruqing.cn/villa/61-15991012737380.jpg" alt="" />
                    <p className='item-title'>泳池别墅</p>
                </div>
            </div>
        </div>
        {/* 热门城市 */}
        <div className='city'>
            <p className='city-title'>热门城市</p>
            <ul className='city-list'>
                <li className="city-item">深圳</li>
                <li className="city-item">深圳</li>
                <li className="city-item">深圳</li>
                <li className="city-item">深圳</li>
                <li className="city-item">深圳</li>
                <li className="city-item">深圳</li>
                <li className="city-item">深圳</li>
                <li className="city-item">深圳</li>
            </ul>
        </div>
        {/* 目的地推荐 */}
        <div className="target">
            <p className='target-title'>目的地推荐</p>
            <ul className="target-list">
                <Link to="/home/destination" className="target-item">
                    <img className='target-img' src="https://img.villaday.com/images/village/vg_213/213-15326755495680.jpg" alt="" />
                    <p className='t1'>深圳·较场尾/大鹏古城</p>
                    <p className='t2'>连海岸线都不愿意离开的民宿村</p>
                    <p className='t3'>深圳,大鹏新区</p>
                </Link>
                <li className="target-item">
                    <img className='target-img' src="https://img.villaday.com/images/village/vg_213/213-15326755495680.jpg" alt="" />
                    <p className='t1'>深圳·较场尾/大鹏古城</p>
                    <p className='t2'>连海岸线都不愿意离开的民宿村</p>
                    <p className='t3'>深圳,大鹏新区</p>
                </li>
                <li className="target-item">
                    <img className='target-img' src="https://img.villaday.com/images/village/vg_213/213-15326755495680.jpg" alt="" />
                    <p className='t1'>深圳·较场尾/大鹏古城</p>
                    <p className='t2'>连海岸线都不愿意离开的民宿村</p>
                    <p className='t3'>深圳,大鹏新区</p>
                </li>
                <li className="target-item">
                    <img className='target-img' src="https://img.villaday.com/images/village/vg_213/213-15326755495680.jpg" alt="" />
                    <p className='t1'>深圳·较场尾/大鹏古城</p>
                    <p className='t2'>连海岸线都不愿意离开的民宿村</p>
                    <p className='t3'>深圳,大鹏新区</p>
                </li>
            </ul>
        </div>
        <Footer />
    </div> );
}

export default List;